<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="110" formType="add" :isSubmitBtn="false" @formChange="formChangeHandle" />
    <FilterTable ref="table" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" selectionType="single" :datakey="'rows'" :onColumnsChange="columns => (this.columns = columns)">
    </FilterTable>
    <FilterTable ref="table1" :columns="columns1" :fetchapi="fetchApi1" :params="fetchParams1" selectionType="single" :datakey="'rows'" :onColumnsChange="columns => (this.columns = columns)">
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button type="primary">打印收据</el-button>
      <el-button type="primary" disabled @click="saveDialog">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { addRole } from '@/api/common/auth/roleManage';
import { getServiceAdvisor, getReceiptRecord, getReceiptsDetail, getReductionRecord } from '@/api/finance/repair/receivables';
import * as types from '@/api/common/auth/roleManage/types';

export default {
  name: 'ReceiptsDetail',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = null;
    return {
      index: null,
      formList: this.createFormList(),
      columns: this.createTableColumns(),
      columns1: this.createTableColumns1(),
      fetchApi: getReceiptRecord,
      fetchApi1: getReductionRecord,
      fetchParams: { xhrAbort: true },
      fetchParams1: { xhrAbort: true }
    };
  },
  computed: {
    ...mapState('app', ['btnLoading']),
    addBtnState() {
      return this.btnLoading[types.YAN_ROLE_ADD];
    }
  },
  created() {
    if (this.type === 'edit') {
      this.formList.forEach(x => {
        x.initialValue = this.rowData[x.fieldName];
      });
    }
  },
  mounted() {
    this.getServiceAdvisor();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'LICENSE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'VIN',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'OWNER_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主姓名',
          fieldName: 'OWNER_NAME',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'RO_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '备件销售单号',
          fieldName: 'SALES_PART_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '结算单号',
          fieldName: 'BALANCE_NO',
          disabled: true
        },
        {
          type: 'SELECT',
          itemList: [],
          label: '服务工程师',
          fieldName: 'SERVICE_ADVISOR',
          disabled: true
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '收款单号',
          dataIndex: 'RECEIVE_NO',
          sorter: true
        },
        {
          title: '收款日期',
          dataIndex: 'RECEIVE_DATE',
          sorter: true
        },
        {
          title: '收款金额',
          dataIndex: 'RECEIVE_AMOUNT',
          sorter: true
        },
        {
          title: '销帐标志',
          dataIndex: 'WRITEOFF_TAG',
          sorter: true
        },
        {
          title: '经手人',
          dataIndex: 'HANDER_NAME',
          sorter: true
        },
        {
          title: '付款方式',
          dataIndex: 'PAY_TYPE_NAME',
          sorter: true
        },
        {
          title: '本次使用余款',
          dataIndex: 'PAYOUT_AMOUNT',
          sorter: true
        },
        {
          title: '已开票',
          dataIndex: 'INVOICE_TAG',
          sorter: true
        },
        {
          title: '是否全部开票',
          dataIndex: 'IS_ALL_INVOICE',
          sorter: true
        },
        {
          title: '发票类型',
          dataIndex: 'INVOICE_TYPE_CODE',
          sorter: true
        },
        {
          title: '票据号码',
          dataIndex: 'BILL_NO',
          sorter: true
        },
        {
          title: '开票人',
          dataIndex: 'INVOICE_MAKER_NAME',
          sorter: true
        },
        {
          title: '支票号码',
          dataIndex: 'CHECK_NO',
          sorter: true
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          sorter: true
        }
      ];
    },
    createTableColumns1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '减免单号',
          dataIndex: 'DERATE_NO',
          sorter: true
        },
        {
          title: '减免金额',
          dataIndex: 'DERATE_AMOUNT',
          sorter: true
        },
        {
          title: '减免日期',
          dataIndex: 'DERATE_DATE',
          sorter: true
        },
        {
          title: '减免批准人',
          dataIndex: 'DERATE_RATIFIER',
          sorter: true
        },
        {
          title: '经手人',
          dataIndex: 'EMPLOYEE_NAME',
          sorter: true
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          sorter: true
        }
      ];
    },
    openModel(data) {
      // console.log(data.DEALER_CODE)
      this.getReceiptRecord(data.BALA_PAYOBJ_ID, data.DEALER_CODE);
      this.getReductionRecord(data.BALA_PAYOBJ_ID, data.DEALER_CODE);
      this.getReceiptsDetail(data.BALANCE_NO, data.DEALER_CODE);
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    async getServiceAdvisor() {
      const res = await getServiceAdvisor();
      // console.log(res)
      this.formList[7].itemList = res.map(x => ({ value: x.EMPLOYEE_NO, text: x.EMPLOYEE_NAME }));
    },
    async getReceiptRecord(id, code) {
      const res = await getReceiptRecord(id, code);
      // console.log(res)
      this.$refs.table.$refs.pageTable.EXECUTE_INSERT(res);
    },
    async getReductionRecord(id, code) {
      const res = await getReductionRecord(id, code);
      // console.log(res)
      this.$refs.table1.$refs.pageTable.EXECUTE_INSERT(res);
    },
    async getReceiptsDetail(id, code) {
      const res = await getReceiptsDetail(id, code);
      // console.log('res',res)
      for (let [key, value] of Object.entries(res)) {
        this.formList.some(item => {
          if (item.fieldName === key) {
            item.initialValue = value;
            return true;
          }
        });
      }
    },
    // async saveDialog() {
    //   this.$refs.formPanel.SUBMIT_FORM();

    //   this.$set(this.saveData, 'dataType', '10461001')
    //   this.$set(this.saveData, 'dataSource', '10451001')
    //   if (this.saveData !== null) {
    //     const res = await addRole(this.saveData);
    //     if (res.resultCode === 200) {
    //       this.$notify.success({title: '提示信息',message:'新增成功!'});
    //       // 重新加载
    //       this.closeDialog('refresh');
    //     }else {
    //       this.$notify.error({title: '提示信息',message:res.errMsg||'新增失败!'});
    //       this.closeDialog()
    //     }
    //   }
    // },
    saveDialog() {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.formList[0].initialValue) {
        var data = {
          index: this.index,
          list: {}
        };
        data.list.ADD_ITEM_NAME = this.formList[0].initialValue;
        data.list.ADD_ITEM_CODE = this.formList[1].initialValue;
        data.list.ADD_ITEM_PRICE = this.formList[2].initialValue;
        data.list.CHARGE_PARTITION_CODE = this.formList[3].initialValue;
        data.list.REMARK = this.formList[4].initialValue;
        this.$emit('close', false, data);
      }
    },
    closeDialog() {
      this.$emit('close', false);
    },
    changeNameSelect(val) {
      // console.log(this.formList)
      for (const item of this.formList[0].itemList) {
        if (item.text === val) {
          this.formList[1].initialValue = item.code;
          this.formList[2].initialValue = item.price;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
